<template>
	<div class="check-history">
		<el-card style="width: 100%;" v-loading="loading">
			<el-collapse v-model="activeNames" @change="handleChange" accordion style="width: 100%;">
				<el-collapse-item
					v-for="item in recognitionRecord"
					:key="item.id"
					:name="item.id"
					style="width: 100%;"
				>
					<template #title>
						<div class="collapse-header">
							<el-tag type="info">ID: {{ item.id }}</el-tag>
							<span class="record-time">{{formatTime(item.time)}}</span>
							<el-badge :value="item.bboxes.length" type="primary" class="badge"></el-badge>
						</div>
					</template>
					<template #icon="{ isActive }">
						<span class="icon-ele">{{ isActive ? '收起详情' : '展开详情' }}</span>
					</template>
					<el-row justify="center">
						<el-descriptions :column="2" direction="vertical" border>
							<el-descriptions-item label="上传图片" :span="1">
								<el-image
									:src="'api/'+item.upload_image"
									class="record-image"
									fit="cover"
									:preview-src-list="['api/'+item.upload_image]"
									:zoom-rate="1.2"
									:max-scale="7"
									:min-scale="0.2"
									hide-on-click-modal
									preview-teleported
								>
									<template #error>
										<div class="image-error">
											<el-icon>
												<Picture/>
											</el-icon>
											<span>加载失败</span>
										</div>
									</template>
								</el-image>
							</el-descriptions-item>
							<el-descriptions-item label="识别图片" :span="1">
								<el-image
									:src="'api/'+item.result_image"
									:preview-src-list="['api/'+item.result_image]"
									class="record-image"
									fit="cover"
									preview-teleported
								></el-image>
							</el-descriptions-item>
						</el-descriptions>
					</el-row>
					<el-row justify="center" :gutter="24">
						<el-col :span="24">
							<el-table
								:data="item.bboxes"
								stripe
								border
								size="small"
								:row-class-name="tableRowClassName"
							>
								<el-table-column align="center" type="index"/>
								<el-table-column label="ID" prop="id" align="center"/>
								<el-table-column label="名称" prop="category"  align="center"/>
								<el-table-column label="置信度" prop="confidence"  align="center">
									<template #default="{row}">
										<el-progress :percentage="(row.confidence * 100).toFixed(2)" :stroke-width="20" :color="[
											{color: '#67C23A', percentage: 100},
											{color: '#409EFF', percentage: 80},
											{color: '#00aed1', percentage: 60},
											{color: '#E6A23C', percentage: 40},
											{color: '#F56C6C', percentage: 20},
										]"/>
<!--										<el-tag :type="row.confidence > 0.8 ? 'success' : 'warning'">-->
<!--											{{ (row.confidence * 100).toFixed(1) }}%-->
<!--										</el-tag>-->
									</template>
								</el-table-column>
								<el-table-column label="x" prop="bbox_x" align="center"/>
								<el-table-column label="y" prop="bbox_y" align="center"/>
								<el-table-column label="w" prop="bbox_w" align="center"/>
								<el-table-column label="h" prop="bbox_h" align="center"/>
							</el-table>
						</el-col>
					</el-row>
				</el-collapse-item>
			</el-collapse>
		</el-card>
		<div style="margin-top: 14px; display: flex; align-items: center; justify-content: flex-end">
			<el-pagination background layout="prev, pager, next, total" :total="total" @current-change="pageChange"/>
		</div>
	</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {getYoloRecognitionRecord} from "/@api/yolo_model/hz-system-yolo-model-api";
import {CollapseModelValue} from "element-plus";
import dayjs from 'dayjs'
import {Picture} from "@element-plus/icons-vue";

//格式化时间
const formatTime = time => {
	return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

const activeNames = ref(['1'])
const recognitionRecord = ref([]);
const total = ref(0)
const pageConfig = ref({
	page: 1,
	pageSize: 10,
	total: 0,
});
const loading = ref(false)
const pageChange = page => {
	pageConfig.value.page = page
	loadYoLoRecognitionRecord()
}

//1.YOLO识别记录
const loadYoLoRecognitionRecord = async () => {
	loading.value = true
	const response = await getYoloRecognitionRecord({
		page: pageConfig.value.page,
		pageSize: pageConfig.value.pageSize,
	});
	recognitionRecord.value = response.data.record;
	total.value = response.data.total;
	loading.value = false
};
const handleChange = (val: CollapseModelValue) => {
	console.log(val)
}
loadYoLoRecognitionRecord()
</script>
<style scoped lang="scss">
.check-history{
	padding: 14px;
}

.collapse-header{
	display: flex;
	align-items: center;
	.record-time{
		margin: 0 8px;
	}
}
.icon-ele {
	margin: 0 8px 0 auto;
	color: #409eff;
}
.record-image {
	width: 200px;
	height: 200px;
	border-radius: 6px;
	transition: transform 0.3s;
	cursor: pointer;
}

.record-image:hover {
	transform: scale(1.05);
}
</style>
